Day 14：Chrome Extension 實作篇 - Content Script DOM 操作基礎

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

👨‍💻 作者：輔大智慧資安 412580084

📅 Day 14：Chrome Extension 實作篇 - Content Script DOM 操作基礎

🛠️ 開始操作網頁內容

昨天我們學會了 Content Script 的基礎概念，今天我們要學習最基本的 DOM 操作，為後續的資料抓取打好基礎！

📋 學習目標

今天我們要完成：

1. 🔍 學會基本的 DOM 元素選取
2. 📝 掌握安全的元素操作方法
3. 📊 練習簡單的文字內容抓取
4. 🧪 建立可測試的基礎版本

🔍 學會基本的 DOM 操作

1.1 什麼是 DOM 操作？

DOM（Document Object Model）就是網頁的結構，我們可以透過 JavaScript 來讀取和修改它。

🔍 程式碼片段 1：基本的元素選取

在網頁中找到我們需要的元素

// 基本的元素選取方法
const title = document.querySelector('h1');              // 找第一個 h1 標籤
const allLinks = document.querySelectorAll('a');         // 找所有 a 標籤
const byId = document.getElementById('studentName');     // 用 ID 找元素
const byClass = document.querySelector('.course-item'); // 用 class 找元素

🔍 程式碼片段 2：讀取元素內容

從網頁元素中提取我們需要的資料

// 讀取元素的內容
const element = document.querySelector('h1');

if (element) {
  const text = element.textContent;        // 取得純文字內容
  const html = element.innerHTML;          // 取得 HTML 內容

  console.log('文字內容:', text);
  console.log('HTML 內容:', html);
} else {
  console.log('找不到元素');
}

1.2 安全的元素操作

🛡️ 程式碼片段 3：檢查元素是否存在

避免程式因為找不到元素而出錯

// 安全的元素操作函數
function safeGetText(selector) {
  const element = document.querySelector(selector);

  if (element) {
    return element.textContent.trim(); // trim() 移除前後空白
  } else {
    console.log('找不到元素:', selector);
    return null;
  }
}

// 使用範例
const pageTitle = safeGetText('h1');
const studentName = safeGetText('#studentName');

if (pageTitle) {
  console.log('頁面標題:', pageTitle);
} else {
  console.log('沒有找到頁面標題');
}

📊 練習簡單的文字內容抓取

2.1 收集頁面基本資訊

📋 程式碼片段 4：抓取頁面資訊

// 收集頁面基本資訊
function getPageInfo() {
  const pageInfo = {
    title: document.title,                    // 網頁標題
    url: window.location.href,               // 當前網址
    domain: window.location.hostname,        // 網域名稱
    timestamp: new Date().toISOString()      // 當前時間
  };

  console.log('頁面資訊:', pageInfo);
  return pageInfo;
}

// 使用範例
const info = getPageInfo();

用法說明：

• document.title：取得網頁標題
• window.location.href：取得完整網址
• window.location.hostname：取得網域名稱
• new Date().toISOString()：取得當前時間
• 用途：收集網頁的基本資訊

🧪 測試階段

3.1 整合所有功能

// content.js - Day 14 基礎版本
console.log('🌐 Content Script DOM 操作練習 - Day 14');

// 安全的元素操作函數
function safeGetText(selector) {
  const element = document.querySelector(selector);
  return element ? element.textContent.trim() : null;
}

// 收集頁面基本資訊
function getPageInfo() {
  return {
    title: document.title,
    url: window.location.href,
    domain: window.location.hostname,
    timestamp: new Date().toISOString()
  };
}

// 統計網頁元素
function countElements() {
  return {
    links: document.querySelectorAll('a').length,
    images: document.querySelectorAll('img').length,
    tables: document.querySelectorAll('table').length,
    forms: document.querySelectorAll('form').length,
    inputs: document.querySelectorAll('input').length
  };
}

// 主要執行函數
function practiceDOM() {
  console.log('📊 開始 DOM 操作練習');

  // 1. 收集頁面資訊
  const pageInfo = getPageInfo();
  console.log('頁面資訊:', pageInfo);

  // 2. 統計元素
  const elementCount = countElements();
  console.log('元素統計:', elementCount);

  // 3. 嘗試抓取常見元素
  const title = safeGetText('h1');
  const firstLink = safeGetText('a');

  if (title) {
    console.log('✅ 找到標題:', title);
  } else {
    console.log('❌ 沒有找到 h1 標題');
  }

  if (firstLink) {
    console.log('✅ 找到第一個連結:', firstLink);
  } else {
    console.log('❌ 沒有找到連結');
  }

  return {
    pageInfo,
    elementCount,
    extractedText: { title, firstLink }
  };
}

// 監聽來自 background 的訊息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('📨 收到訊息:', request);

  if (request.action === 'practiceDOM') {
    try {
      const result = practiceDOM();
      sendResponse({ success: true, data: result });
    } catch (error) {
      console.error('DOM 操作練習失敗:', error);
      sendResponse({ success: false, error: error.message });
    }
  }

  return true;
});

// 頁面載入完成後自動執行一次
setTimeout(() => {
  practiceDOM();
}, 1000);

console.log('🚀 DOM 操作練習器初始化完成 - Day 14');

3.2 測試步驟

🔧 步驟 1：更新檔案

• 將上面的程式碼保存為新的 content.js

🔄 步驟 2：重新載入擴充功能

• 在 Chrome 擴充功能管理頁面重新載入

🧪 步驟 3：測試功能

1. 開啟輔大學生入口網中的選課清單：http://estu.fju.edu.tw/
2. 按下F12 查看是否有以下日誌輸出即成功
   

🔗 知識銜接：今天我們學會了基本的 DOM 操作，明天將學習如何識別輔大系統的特定元素。

🎯 下集預告：Day 15 - 輔大系統基礎元素識別 🎓